<script lang="ts" setup>
/**
 * axios axios 配置
 * myMixin 页面公共方法
 */
let axios: any = inject('$axios');
const route: any = useRoute(); // 当前页面路由信息
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();
import { useRouter } from 'vue-router';
const router = useRouter();

/**
 * 市数据
 */
const cityList = ref([]);
const activeCityValue = ref(130100);
const handelCityBtn = (code) => {
  activeCityValue.value = code;
  activeRegionValue.value = [];
  getRegionList(code);
  getTableList(1);
};

const regionList = ref([]);
const activeRegionValue = ref([]);
const getRegionList = async (code) => {
  let regionDate = await axios.getCityChina({
    is_tree: 2,
    parent_code: code,
  });
  regionList.value = regionDate.data.data;
  getTableList(1);
};
const handelRegionBtn = (code) => {
  if (activeRegionValue.value.includes(code)) {
    var index = activeRegionValue.value.findIndex((value) => value == code);
    activeRegionValue.value.splice(index, 1);
  } else {
    activeRegionValue.value.push(code);
  }

  // 处理不限数据
  if (code == 0) {
    activeRegionValue.value = [0];
  } else {
    var index0 = activeRegionValue.value.findIndex((value) => value == 0);
    if (index0 != -1) activeRegionValue.value.splice(index0, 1);
  }
  getTableList(1);
};

// 标签
const labelList = ref([]);
const activeTagValue = ref([]);
const handelTagBtn = (code) => {
  if (activeTagValue.value.includes(code)) {
    var index = activeTagValue.value.findIndex((value) => value == code);
    activeTagValue.value.splice(index, 1);
  } else {
    activeTagValue.value.push(code);
  }

  // 处理不限数据
  if (code == 0) {
    activeTagValue.value = [0];
  } else {
    var index0 = activeTagValue.value.findIndex((value) => value == 0);
    if (index0 != -1) activeTagValue.value.splice(index0, 1);
  }
  getTableList(1);
};

/**
 * 列表表格：
 * tableOptions 表格组件配置
 * columns 表格columns配置
 * tableData 表格数据参数
 * loadingTable 加载表格数据loading
 * getTableList 获取表格数据方法
 * handlePaginationChange 切换currentPage或切换pageSize
 */
const tableOptions = reactive({
  showPagination: true,
  paginationConfig: {
    total: 10,
    currentPage: 1,
    pageSize: 10,
  },
});
const columns = ref([
  {
    type: 'selection',
    align: 'center',
    width: '60',
  },
  {
    prop: 'no',
    label: '信息编号',
    align: 'center',
    width: '180',
  },
  {
    prop: 'cat_1_msg',
    label: '分类',
    width: '120',
    align: 'center',
  },
  {
    prop: 'area_whole_msg',
    label: '发布地区',
    align: 'center',
    width: '180',
  },
  {
    prop: 'tag_json',
    label: '标签',
    align: 'center',
    width: '180',
  },
  {
    prop: 'user_id',
    label: '用户ID',
    align: 'center',
    width: '120',
  },
  {
    prop: 'plain_end_time',
    label: '计划结束时间',
    type: 'date',
    align: 'center',
    width: '180',
  },
  {
    prop: 'created_at',
    label: '创建时间',
    type: 'date',
    align: 'center',
    width: '180',
  },
  {
    label: '操作',
    align: 'center',
    render: ({ row }) => {
      let arr = [
        {
          name: '查看',
          type: 'primary',
          icon: '',
          command: handelWatch,
        },
        {
          name: '复制',
          type: 'primary',
          icon: '',
          command: handelCopy,
        },
        {
          name: '推送',
          type: 'primary',
          icon: '',
          command: handelTui,
        },
      ];
      let showButton = arr.map((item) => {
        return h(
          ElButton,
          {
            type: item.type,
            icon: item.icon,
            text: true,
            style: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'start',
              height: '25px',
              width: '50%',
              margin: '0  5px',
              padding: 0,
            },
            onClick: () => item.command(row),
          },
          item.name,
        );
      });
      return h(
        'div',
        {
          style: {
            textAlign: 'center',
            width: '35%',
            height: '100%',
            margin: '0 auto',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
          },
        },
        showButton,
      );
    },
  },
]);
const tableData = ref([]);
const tableLogsId = ref(null);
const loadingTable = ref(false);
const table = ref(null);
const getTableList = async (page?: any) => {
  let params = Object.assign(
    {
      page: page ? page : tableOptions.paginationConfig.currentPage,
      limit: tableOptions.paginationConfig.pageSize,
    },
    {
      city_id: activeCityValue.value,
      tag: [],
      task_id: route.query.task_id,
      district_id: [],
    },
  );
  if (!activeTagValue.value.includes(0) && activeTagValue.value.length > 0) {
    params.tag = activeTagValue.value;
  }
  if (
    !activeRegionValue.value.includes(0) &&
    activeRegionValue.value.length > 0
  ) {
    params.district_id = activeRegionValue.value;
  }
  loadingTable.value = true;
  let res = await axios.getTaskMatchList(params);
  setTimeout(() => {
    loadingTable.value = false;
  }, 200);
  if (res.data.code != 200) return;
  tableData.value = res.data.data.list;
  tableLogsId.value = res.data.data.logs_id;
  tableOptions.paginationConfig = {
    total: Number(res.data.data.pageData.count),
    currentPage: Number(res.data.data.pageData.page),
    pageSize: 10,
  };
};
const handlePaginationChange = (currentPage, pageSize) => {
  tableOptions.paginationConfig.currentPage = currentPage;
  tableOptions.paginationConfig.pageSize = pageSize;
  getTableList();
};

/**
 * table 操作
 */
const selectValue = ref([]);
// 多选
const handleSelectionChange = (val, row) => {
  if (!selectValue.value.includes(row.id)) {
    selectValue.value.push(row.id);
  }
};
// 全选
const handleSelectionAll = (val) => {
  selectValue.value = val.map((item) => {
    return item.id;
  });
};
const handelWatch = (row) => {
  if (!row.rpc_id)
    return ElMessage({
      type: 'warning',
      message: `快捷信息请先在任务管理编辑后查看`,
    });
  router.push({
    path: '/home/message/messageDetail',
    query: {
      info: JSON.stringify(row),
    },
  });
};
const handelCopy = async (row) => {
  console.log(row);
  if (!row.task_message) return ElMessage.warning('暂无信息可复制！');
  await toClipboard(`${row.task_message}`);
  ElMessage.success('复制成功！');
};
const handelTui = async (row) => {
  let res = await axios.getTaskMatch42({
    logs_id: tableLogsId.value,
    user_id: [row.id],
  });
  if (res.data.code != 200) return ElMessage.error(res.data.message);
  ElMessage.success('推送成功');
};
const handelTuiBtn = async () => {
  if (selectValue.value.length <= 0)
    return ElMessage.warning('请先选择推送数据');
  let res = await axios.getTaskMatch42({
    logs_id: tableLogsId.value,
    user_id: selectValue.value,
  });
  if (res.data.code != 200) return ElMessage.error(res.data.message);
  ElMessage.success('批量推送成功');
  table.value.handelClearSelection();
};

/**
 * 初始化入口
 */
const init = async () => {
  // 市数据
  let cityDate = await axios.getCityChina({
    is_tree: 2,
    parent_code: 130000,
  });
  cityList.value = cityDate.data.data;

  // 区数据
  setTimeout(() => {
    getRegionList(cityList.value[0].code);
  });

  // 标签
  let labelDate = await axios.getTagList({
    task_id: route.query.task_id,
  });
  labelList.value = labelDate.data.data;
};
init();
</script>
<template>
  <div class="taskMate">
    <div class="titleTask">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home/task' }">
          任务管理
        </el-breadcrumb-item>
        <el-breadcrumb-item>匹配信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 市 -->
    <div class="taskCity">
      <p style="width: 85px; font-weight: bold">选择市</p>
      <div class="taskCityNo"></div>
      <div class="taskCityBox">
        <div
          class="taskCityList"
          v-for="(item, index) in cityList"
          :key="index"
          @click="handelCityBtn(item.code)"
        >
          <span :class="[{ active: activeCityValue == item.code }]">
            {{ item.name }}
          </span>
        </div>
      </div>
    </div>
    <!-- 区 -->
    <div class="taskRegion">
      <p style="width: 85px; font-weight: bold">选择区县</p>
      <div
        class="taskRegionNo"
        @click="handelRegionBtn(0)"
        :class="[{ active: activeRegionValue.includes(0) }]"
      >
        不限
      </div>
      <div class="taskRegionBox">
        <div
          class="taskRegionList"
          v-for="(item, index) in regionList"
          :key="index"
          @click="handelRegionBtn(item.code)"
        >
          <span :class="[{ active: activeRegionValue.includes(item.code) }]">
            {{ item.name }}
          </span>
        </div>
      </div>
    </div>
    <!-- 标签 -->
    <div class="taskTag">
      <p style="width: 85px; font-weight: bold">标签</p>
      <div
        class="taskTagNo"
        :class="[{ active: activeTagValue.includes(0) }]"
        @click="handelTagBtn(0)"
      >
        不限
      </div>
      <div class="taskTagBox">
        <div
          class="taskTagList"
          v-for="(item, index) in labelList"
          :key="index"
          @click="handelTagBtn(item.tag)"
        >
          <span :class="[{ active: activeTagValue.includes(item.tag) }]">
            {{ item.tag }}
          </span>
        </div>
      </div>
    </div>
    <div class="taskTable">
      <!-- 搜索 、表格数据 -->
      <pagesLayout pagesType="alone" class="padding-20">
        <template #center>
          <div class="pageslayout">
            <!-- 、表格数据 -->
            <div
              class="pageslayoutContaint"
              v-loading="loadingTable"
              element-loading-text="加载中..."
            >
              <div style="margin-bottom: 10px">
                <el-button type="primary" @click="handelTuiBtn">
                  批量推送
                </el-button>
              </div>
              <Table
                :columns="columns"
                :table-data="tableData"
                :options="tableOptions"
                style="height: 100%"
                ref="table"
                @handel-pagination-change="handlePaginationChange"
                @selection-change="handleSelectionChange"
                @selection-all="handleSelectionAll"
              ></Table>
            </div>
          </div>
        </template>
      </pagesLayout>
    </div>
  </div>
</template>
<style scoped lang="scss">
.taskMate {
  height: 100%;
  overflow-y: scroll;
  .titleTask {
    height: 60px;
    border-bottom: 1px solid #e4e4e4;
    display: flex;
    align-items: center;
    padding: 0 30px;
  }

  .taskCity {
    margin-top: 20px;
    padding-left: 30px;
    display: flex;
    align-items: flex-start;
    .taskCityNo {
      width: 60px;
      font-weight: bold;
      font-size: 14px;
      cursor: pointer;
      color: #43351b;
      text-align: left;
    }
    .taskCityBox {
      display: flex;
      width: calc(100% - 145px);
      margin-bottom: 18px;
      .taskCityList {
        display: flex;

        > span {
          width: 100px;
          font-weight: bold;
          font-size: 14px;
          cursor: pointer;
          color: #43351b;
          text-align: left;
        }
      }
    }
  }
  .taskRegion {
    padding-left: 30px;
    display: flex;
    align-items: flex-start;
    .taskRegionNo {
      width: 60px;
      font-weight: bold;
      font-size: 14px;
      cursor: pointer;
      color: #43351b;
      text-align: left;
      margin-bottom: 18px;
    }
    .taskRegionBox {
      display: flex;
      flex-wrap: wrap;
      width: calc(100% - 145px);
      margin-bottom: 10px;
      .taskRegionList {
        display: flex;
        margin-bottom: 8px;

        > span {
          width: 100px;
          font-weight: bold;
          font-size: 14px;
          cursor: pointer;
          color: #43351b;
          text-align: left;
        }
      }
    }
  }
  .taskTag {
    padding-left: 30px;
    display: flex;
    align-items: flex-start;
    .taskTagNo {
      width: 60px;
      font-weight: bold;
      font-size: 14px;
      cursor: pointer;
      color: #43351b;
      text-align: left;
    }
    .taskTagBox {
      display: flex;
      width: calc(100% - 145px);
      height: 30px;
      margin-bottom: 18px;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        height: 0px !important;
      }
      .taskTagList {
        display: flex;
        > span {
          width: 100px;
          font-weight: bold;
          font-size: 14px;
          cursor: pointer;
          color: #43351b;
          text-align: left;
        }
      }
    }
  }
  .active {
    color: #71b1ff !important;
  }
}
</style>
